<template>
    <el-form id="planDetail">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item to="/developmentPlan">客户开发计划</el-breadcrumb-item>
                <el-breadcrumb-item class="no-active">{{isExecute?'执行计划':'制定计划'}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form class="container">
            <el-form ref="planForm" :model="form" label-width="90px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="编号">
                            <el-input disabled v-model="form.id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机会来源">
                            <el-input disabled v-model="form.opportunitySource"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item inline-message label="客户名称">
                            <el-input disabled v-model="form.customerName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="成功几率">
                            <el-input disabled v-model="form.probabilitySuccess">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人">
                            <el-input disabled v-model="form.linkman"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话">
                            <el-input disabled v-model="form.linkPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="概要">
                            <el-input disabled v-model="form.summary"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="创建人">
                                    <el-input disabled v-model="form.creater"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="创建时间">
                                    <el-date-picker
                                        disabled
                                        v-model="form.createTime"
                                        format="yyyy年MM月dd日 HH时mm分"
                                        type="datetime"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机会描述">
                            <el-input
                                disabled
                                type="textarea"
                                rows="2"
                                v-model="form.opportunitDescribe"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="指派给">
                            <el-select disabled v-model="form.appointId">
                                <el-option label="a" value="b"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="指派时间">
                            <el-date-picker
                                disabled
                                v-model="form.appointTime"
                                format="yyyy年MM月dd日 HH时mm分"
                                type="datetime"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-form>

        <el-card class="box-card">
            <el-form ref="planItemForm" :model="planItemForm" label-width="90px">
                <el-row class="planItem">
                    <el-col :span="5">日期</el-col>
                    <el-col :span="colVal">计划项</el-col>
                    <el-col v-if="isExecute" :span="8">执行效果</el-col>
                    <el-col :span="3">操作</el-col>
                </el-row>
                <el-row v-for="(item,index) of planItemForm.items" :key="index" class="item">
                    <el-col :span="5">
                        <el-date-picker
                            class="item-input"
                            type="date"
                            placeholder="请选择计划日期"
                            format="yyyy年MM月dd日"
                            v-model="item.planTime"
                            width="100%"
                        ></el-date-picker>
                    </el-col>
                    <el-col :span="colVal">
                        <el-input
                            class="item-input"
                            placeholder="请输入计划项"
                            v-model="item.planItem"
                        ></el-input>
                    </el-col>
                    <el-col v-if="isExecute" :span="8">
                        <el-input
                            class="item-input"
                            placeholder="请输入执行结果"
                            v-model="item.executionResult"
                        ></el-input>
                    </el-col>
                    <el-col :span="3" class="btn">
                        <el-button v-if="!isExecute" size="mini" type="danger" @click.prevent="delItem(item)">删除</el-button>
                        <el-button size="mini" type="primary" @click.prevent="saveItem(item)">保存</el-button>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" class="btn-group">
                    <el-col :span="12">
                        <el-button-group>
                            <el-button
                                icon="el-icon-arrow-left"
                                type="info"
                                @click="$router.push('/developmentPlan')"
                            >返回</el-button>
                            <el-button
                                icon="el-icon-circle-check"
                                type="primary"
                                @click="handerSave('opportunityForm')"
                            >保存</el-button>
                            <el-button
                                v-if="!isExecute"
                                icon="el-icon-circle-plus-outline"
                                type="warning"
                                @click="addItem()"
                            >新增计划项</el-button>
                            <el-button
                                v-if="isExecute"
                                icon="el-icon-s-check"
                                type="danger"
                                @click="planFailure()"
                            >终止开发计划</el-button>
                            <el-button
                                v-if="isExecute"
                                icon="el-icon-document-checked"
                                type="danger"
                                @click="planSuccess()"
                            >开发成功</el-button>
                            <el-button
                                icon="el-icon-phone-outline"
                                type="success"
                                @click="$message.info('敬请期待..')"
                            >帮助</el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {}, //营销计划表单
            planItemForm: {
                items: [
                    {
                        planTime: new Date(),
                        planItem: '',
                        executionResult: ''
                    }
                ]
            }
        };
    },
    computed: {
        isExecute(){
            return this.$route.params.type==='execute';
        },
        colVal(){
            return this.isExecute?8:16;
        }
    },
    methods: {
        addItem() {
            this.planItemForm.items.push({
                planTime:new Date(),
                planItem:'',
                executionResult:''
            });
        },
        delItem(item){
            this.planItemForm.items = this.planItemForm.items.filter(pi=>pi!==item);
        },
        planFailure(){ //终止开发
            this.form.state=5; //开发失败
        },
        planSuccess(){ //开发成功
            this.form.state=4;
        }
    }
};
</script>


<style scoped>
.el-input,
.el-select,
.el-textarea {
    width: 100% !important;
}
.box-card {
    margin-top: 10px;
}
.planItem {
    padding: 10px;
    background-color: #20a0ff;
    color: white;
}
.planItem .el-col {
    text-align: center;
    border-right: 1px solid white;
}
.planItem .el-col:last-child {
    border-right: 0px;
}
.item {
    border: 1px solid #ebebeb;
    border-top: 0;
    display: flex;
}
.btn {
    line-height: 40px;
    text-align: center;
}
.btn-group {
    margin-top: 15px;
}
</style>